<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for&v-text&v-html</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>v-for&v-text&v-html实例</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
               <span v-text="item"></span>
               <span v-html="item"></span>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student,index) in sortStudents">
                {{ index }}: {{ student.name }} 今年岁{{ student.age }}了
            </li>
        </ul>
        <hr>
        <div id="text">
            <span v-text="message"></span><br>
            <span>{{ message }}</span>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                items:[],
                students:[],
                message:""
            },
            mounted(){
                let that = this;
                setTimeout(function(){
                    that.items = [12,25,34,67,43,90,8,65];
                    that.students = [
                        {name:"xiaoming",age:34},
                        {name:"halen",age:16},
                        {name:"xingxing",age:29},
                        {name:"siry",age:"3"}
                    ];
                    that.message = "hello world";
                },5000);
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sort);
                }, 
                sortStudents:function(){
                    return sortArr(this.students,"age");
                }
            }
        });
        function sort(a,b){
            return a-b;
        }
        function sortArr(arr,key){
            return  arr.sort(function(a,b){
                var x = a[key],
                    y = b[key];
                return (x-y)<0?-1:(x>y?1:0);
            })
        }
    </script>
</body>
</html>